

// 文本的虚拟节点
function createTextVDom(text){
	return {
		type:"TEXT",
		props:{
			nodeValue:text,
			children:[]
		}
	}
}

// 创建虚拟节点
function createElement(type,props,...children){
	return {
		type,
		props:{
			...props,
			children:children.map(child=>{
				return typeof child === 'object'?child:createTextVDom(child)
			})
		}
	}
}

function render(vDom,container){
	let dom;
	// 检查当前节点是文本还是对象
	console.log(vDom)
	if(typeof vDom !=='object'){
		
		dom = document.createTextNode(vDom);
	}else{
		dom = document.createElement(vDom.type)
	}


	// 将vdom上除了children之外所有属性，都挂载到dom
	if(vDom.props){
		Object.keys(vDom.props).filter(
			key=>key!='children'
		).forEach(item=>{
			dom[item] = vDom.props[item]
		})
	}

	// 如果还有子元素，就可以递归调用render函数
	if(vDom.props && vDom.props.children && typeof vDom.props.children !== 'string'){
		vDom.props.children.forEach(child=>render(child,dom));
	}
	// 如果不是1个数组，那么就直接进行渲染
	if(vDom.props && vDom.props.children && typeof vDom.props.children === 'string'){
		render(vDom.props.children,dom)
	}

	container.appendChild(dom)
}





export default {
	createElement,
	render,
	// useState,
	// Component,
	// tansfer
}